<template>
  <div id="app">
    <ul class="img-box">
      <li v-for="img in imgs" :key="img.id">
        <!-- <img :src="img" alt="img" /> -->
        <img v-lazy="img" alt="img" />
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'App',
  data() {
    return {
      imgs: []
    }
  },
  async created() {
    const res = await axios.get('https://api.github.com/users')
    res.data.forEach((item) => this.imgs.push(item.avatar_url))
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#app {
  height: 100vh;
  width: 100vw;
}
.img-box {
  height: 100%;
  overflow: scroll;
  display: flex;
  flex-direction: column;
  align-items: center;
}
img {
  height: 200px;
}
</style>
